




<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>{% block title %}XX银行管理系统{% endblock %}</title>  
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}public/jquery-easyui-1.3.5/themes/{{themesType}}/easyui.css">
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}public/jquery-easyui-1.3.5/themes/icon.css">

    <script type="text/javascript" src="{{STATIC_URL}}public/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}public/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}public/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
    <script>
        function datagridInit_person(){
            $('#tbl_person').datagrid({
                title:'员工信息',
                width:600,  
                height:350,  
                nowrap: false,  
                striped: true,  
                fit: true,  
                method:'get',
                url:'/tbl_json_persen',
                sortName: 'id',  
                sortOrder: 'desc',  
                idField:'id',  
                frozenColumns:[[  
                    {field:'ck',checkbox:true},  
                    {field:'name',title:'姓名',align:'center'}
                ]],  
                columns:[[
                    {field:'sex',title:'性别',align:'center'},
                    {field:'birthday',title:'生日',width:80,align:'center'}
                ]],  
                pagination:true,  
                rownumbers:true  
            });
        }
    
        function addTab_person(){
            if($('#MainTabs').tabs('exists', '员工信息')){
                $('#MainTabs').tabs('select', '员工信息');
                return;
            }
        
            $('#MainTabs').tabs('add',{
                title:'员工信息',
                content:'<table id="tbl_person"></table>',
                closable:true
            });
            datagridInit_person();
        }

        $(function(){  
            datagridInit_person();
        });  
    </script>  
</head>  
<body class="easyui-layout">  
    <div data-options="region:'north',split:true" title="user 您好！" style="height:100px;padding:10px;">  
        <p>XX银行管理系统</p>  
    </div>  
    <div data-options="region:'south',split:true" title="公告栏" style="height:100px;padding:10px;background:#efefef;">  
        <div class="easyui-layout" data-options="fit:true" style="background:#ccc;">  
            <div data-options="region:'center'">喜讯：银行内部网正式发布！</div>  
            <div data-options="region:'east',split:true" style="width:200px;">号外：本行连续10年利润翻翻！</div>  
        </div>  
    </div>  
    <div data-options="region:'east',iconCls:'icon-help',split:true" title="联系我们" style="width:180px;">  
        <ul>
            <li>E-Mail : 39188043@QQ.com</li>
        </ul>
    </div>  
    {% block west %}
    <div data-options="region:'west',split:true" title="主菜单" style="width:280px;padding1:1px;overflow:hidden;">  
        <div class="easyui-accordion" data-options="fit:true,border:false">  
            <div title="薪资查询" data-options="selected:true" style="padding:10px;overflow:auto;">  
                <p>全行概要</p>  
                <p>个人薪酬</p>  
            </div>  
            <div title="考勤系统" style="padding:10px;">  
                <p>打卡记录</p>  
                <p>年假查询</p>  
            </div>
            <div title="后台维护" style="padding:10px;">  
                <a href='#' onclick='addTab_person()'>员工信息</a>  
                <p>网点信息</p>  
            </div>
        </div>  
    </div>
    {% endblock %}
    {% block center %}
    <div data-options="region:'center'" title="欢迎访问XX银行管理系统！" style="overflow:hidden;">  
        <div id="MainTabs" class="easyui-tabs" data-options="fit:true,border:false">  
            <div title="首页" style="padding:20px;overflow:hidden;">   
              <div style="margin-top:20px;">  
                <h3>欢迎使用！</h3>  
                  <ul>  
                      <li>银行管理系统</li>
                  </ul>  
                </div>  
            </div>  
            <div title="全行概要" data-options="closable:true" style="padding:20px;">

            </div>
            <div title="员工信息" data-options="closable:true" style="overflow:hidden;padding:5px;">  
                <table id="tbl_person"></table>   
            </div>  
        </div>  
    </div>
    {% endblock %}
</body>  
</html> 